<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in result.banner" :key="index"
        ><img :src="item.image_url" alt=""
      /></van-swipe-item>
    </van-swipe>
    <van-tabs v-model="active" :ellipsis="false">
      <van-tab v-for="(item, index) in result.channel" :key="index">
        <template #title>
          <div class="tabUrl" @click="jump(item)">
            <img :src="item.icon_url" alt="" />
          </div>
          <p>{{ item.name }}</p>
        </template>
      </van-tab>
    </van-tabs>
    <h5>品牌制造商直供</h5>
    <van-grid :border="false" :column-num="2">
      <van-grid-item v-for="(item,index) in result.hotGoods" :key="index">
        <van-image :src="item.list_pic_url" />
      </van-grid-item>
     
    </van-grid>
  </div>
</template>
<script>
export default {
  data() {
    return {
      result: {}, // 请求过来的结果
      active: 0, // tab 标签的选项
    };
  },
  created() {
    this.$axios
      .get("http://shop.bufantec.com/bufan/index/index")
      .then((res) => {
        this.result = res.data;
        console.log(this.result);
      });
  },
  methods:{
      jump(val){
        this.$router.push(`/goods/${val.id}`)
      }
  }
};
</script>
<style lang="scss" scoped>
.home {
  background: #fff;
  /deep/.van-tabs--line .van-tabs__wrap {
    height: 55px;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 200px;
  text-align: center;
  background-color: #39a9ed;
  img {
    height: 100%;
  }
}
.tabUrl {
  img {
    width: 40%;
  }
}
h5 {
  line-height: 50px;
  text-align: center;
}
</style>